<template>
    <div class="container">
        <m-header></m-header>
        <img class="menu-img" :src="'http://47.104.186.142:8000/'+menuDetailData.banner">
        <div class="menu">
            <h2 class="title">{{menuDetailData.period_number}}菜谱（{{menuDetailData.community_name}}）</h2>
            <div class="time-content">
                <p>订餐时间：<span>{{menuDetailData.order_time}}</span> </p>
                <p>送餐时间： <span>{{menuDetailData.delivery_time}}</span> </p>
            </div>
            <div class="recommend">
                <div class="left">本期推荐:</div>
                <div class="right">
                    <span class="remarks"> {{menuDetailData.hot_push}} </span>
                </div>
            </div>
        </div>
        <div class="foods-content">
            <div class="food-content" v-for="(food,index) in menuDetailData.menu" :key="index">
                <img class="img" :src="'http://47.104.186.142:8000/'+food.image">
                <div class="right">
                    <div class="title">{{food.name}}</div>
                    <div class="describe">{{food.remarks}}</div>
                    <div class="operate-content">
                        <div class="price">￥{{food.price|numFilter(2)}}</div>
                        <operate :status="food.status" class="operate" @change="change($event,food.id)"></operate>
                    </div>
                </div>
                <span class="state-tag" v-show="food.status=='Close'">已售罄</span>
            </div>
        </div>
        
        <!-- footer底栏 -->
        <div class="footer">
            <div class="totle">合计： ￥{{totlePrice|numFilter(2)}}</div>
            <div class="ordering" :style="{backgroundColor:menuDetailData.status == 'open' || menuDetailData.status == 'Open' ? '#f20c00':'#cccccc'}" @click="gotoPay">
                {{menuDetailData.status == 'open'|| menuDetailData.status == 'Open' ?"去订餐":"已结束"}}
            </div>
        </div>

        <!-- 菜谱未选择弹出模态框 -->
        <modal class="modal" v-if="showModal" @close="showModal = false">
            <span slot="header"></span>
            <span slot="body">
                请选择菜品!
            </span>
            <div slot="footer">
                <button class="modal-default-button" @click="showModal = false">
                    OK
                </button>
            </div>
        </modal>

        <!-- 订餐状态结束弹出模态框 -->
        <modal class="modal" v-if="showModal2" @close="showModal2 = false">
            <span slot="header"></span>
            <span slot="body">
                订餐已结束，请选择其它菜谱！
            </span>
            <div slot="footer">
                <button class="modal-default-button" @click="showModal2 = false">
                    OK
                </button>
            </div>
        </modal>

    </div>
</template>

<script type="text/ecamscript-6">
import timeFormat from "@/commom/js/timeFormat";
import mHeader from "@/components/mHeader/mHeader";
import numFilter from "@/commom/js/numFilter";
import operate from "@/components/menuDetail/operate";
import modal from "@/base/modal/modal";
import Bus from "@/commom/js/bus";

export default {
  data() {
    return {
      menuDetailData: {},
      order: {},
      showModal: false,
      showModal2: false,
      menuDetailId: "",
      emptyMenu:"false"
    };
  },
  components: {
    mHeader,
    operate,
    modal
  },
  computed: {
    totlePrice() {
      let totle = 0;
      this.menuDetailData.menu.forEach(item => {
        if (this.order[item.id]) {
          totle += item.price * this.order[item.id];
        }
      });
      return totle;
    }
  },
  created() {
    //点击选择社区菜谱列表，用setMenuDetailId跳转传参到菜谱详情页
    this.menuDetailId = localStorage.getItem("setMenuDetailId");

    let _this = this;
    this.$axios({
      method: "get",
      url: "http://47.104.186.142:80/cookbook/getCookbookById",
      params: {
        id: this.menuDetailId // 参数是菜谱Id
      }
    }).then(res => {
      _this.menuDetailData = res.data.data[0];
    });

  },
  filters: {
    timeFormat,
    numFilter
  },
  methods: {
    _spliceOrder() {
      let order = [];
      let _this = this;
      _this.menuDetailData.menu.forEach(item => {
        if (this.order[item.id]) {
          let obj = Object.assign({}, item, { number: this.order[item.id] });
          order.push(obj);
        }
      });
      return order;
    },

    change(data,id) {
      var obj = {};
      obj[id] = data;
      this.order = Object.assign({}, this.order, obj);
    },

    gotoPay() {
      // 订餐关闭状态
      if (
        this.menuDetailData.status == "close" ||
        this.menuDetailData.status == "Close"
      ) {
        this.showModal2 = true;
        return;
      }

      // 判断是否选择商品，如果选择存到order数组中
      let haveOrder = false;
      for (let order in this.order) {
        if (this.order[order]) {
          haveOrder = true;
          break;
        }
      }

      if (haveOrder) {
        Bus.order = this._spliceOrder();
        this.$router.push({
          path: "/pay"
        });
      } else {
        this.showModal = true;
      }
    }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~commom/stylus/mixin';

.menu-img {
    width: 100%;
    height: auto;
    display: block;
    padding-top: 44px;
}

.menu {
    padding: 0 15px;

    .title {
        color: #333333;
        font-size: 15px;
        margin-top: 15px;
    }

    .time-content {
        padding: 12px 0 8px;
        color: #f76d5c;
        font-size: 12px;
        line-height: 20px;
    }

    .recommend {
        display: flex;
        padding-bottom: 15px;
        color: #333333;
        font-size: 13px;

        .left {
            flex: 0 0 60px;
            line-height: 18px;
        }

        .right {
            flex: 1;
            line-height: 18px;
        }

        .remarks {
            padding-right: 8px;
        }
    }

    .state-tag {
        position: absolute;
        top: 25px;
    }

    :last-child {
        margin-bottom: 0;
    }
}

.foods-content {
    padding: 0 15px;
    margin-bottom: 60px;

    .food-content {
        padding: 15px 0 7px;
        display: flex;
        border-bottom: 1px solid #eee;
        position:relative;

        .img {
            height: 70px;
            width: 105px;
        }

        .right {
            flex: 1;
            margin-left: 17px;

            .title {
                color: #333;
                font-size: 15px;
                font-weight: bold;
            }

            .describe {
                color: #666;
                font-size: 13px;
                line-height: 16px;
                height: 32px;
                line-hidden(2);
                margin: 5px 0;
            }

            .operate-content {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .price {
                    color: #f20c00;
                    font-size: 12px;
                }
            }
        }

        &:first-child {
            border-top: 1px solid #eee;
        }
        .state-tag {
            position: absolute;
            top: 25px;
            display: block;
            background-color: #7f7d7d;
            padding: 5px;
            border-top-right-radius: 4px;
            border-bottom-right-radius : 4px;
            color: #fff;
            opacity: 0.88;
            font-size: 12px;
        }
    }
}

.current-order {
    background-color: #f0f0f0;
    margin-bottom: 50px;
    padding-bottom: 10px;

    .title {
        color: #333333;
        font-size: 15px;
        height: 60px;
        line-height: 60px;
        font-weight: bolder;
        text-align: center;
        background-color: #ffffff;
    }

    .user-content {
        background-color: #fbfbfb;
        padding-top: 10px;

        .box {
            display: flex;
            margin: 0 15px;
            border-bottom: 1px solid #eee;

            .avatar {
                flex: 0 0 25px;
                height: 25px;
                margin-right: 8px;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .other {
                flex: 1;

                .head {
                    line-height: 25px;
                    margin-bottom: -5px;

                    .user-name {
                        font-size: 13px;
                        color: #333333;
                        margin-right: 13px;
                    }

                    .order-time {
                        font-size: 11px;
                        color: #666666;
                    }
                }

                .content {
                    margin: 15px 0;
                    display: flex;
                    align-items: center;

                    .img {
                        flex: 0 0 71px;
                        height: 47px;
                        width: 71px;
                        margin-right: 15px;
                    }

                    .name {
                        color: #333333;
                        font-size: 15px;
                        margin-right: 30px;
                    }

                    .number {
                        color: #333333;
                        font-size: 13px;
                    }
                }
            }
        }
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    display: flex;
    color: #ffffff;
    font-size: 15px;

    .totle {
        flex: 1;
        background-color: #333333;
        font-weight: bold;
        padding-left: 15px;
    }

    .ordering {
        flex: 0 0 118px;
        text-align: center;
    }
}

.modal {
    .modal-default-button {
        float: right;
        color: #fff;
        background-color: #4aae9b;
        border: 1px solid #4aae9b;
        border-radius: 2px;
        padding: 6px 12px;
        background-color: #4dae9b;
        extent-click();
    }
}
</style>